<template>
	<view>
		<unAuth v-if="roles.toString()=='common'"></unAuth>
		<view v-else>
			<view class="top-img"></view>
			<view class="padding-lr">
				<view class="top_info start_layout">
					<view>
						<image class="avatar-img" src="../../static/mine/avatar1.png"></image>
					</view>
					<view class="col_layout">
						<view class="name">{{userName}}</view>
						<view v-if="roles.includes('company')" class="start_layout">
							<view @click="toPage('/pages_two/mine/company/authSubmit')" class="edit">
								<view>编辑资料</view>
								<u-icon name="arrow-right" color="#ffffff" size="12"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="number-area margin-top">
					<view class="between_layout padding-lr">
						<view class="company-name">项目数据统计<span style="font-size: 24rpx;">（个）</span></view>
						<image style="width: 92rpx;height: 92rpx;" src="../../static/leader/num-icon.png" />
					</view>
					<view class="count-area">
						<u-grid :border="false" col="4">
							<u-grid-item :class="listIndex%4==3?'':'grid-item'" v-for="(listItem,listIndex) in numList"
								:key="listIndex">
								<view class="count-text">{{listItem.count}}</view>
								<text class="count-name">{{listItem.title}}</text>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
				<view class="items_box grid-area">
					<u-grid :border="false" col="4">
						<u-grid-item @click="toPage(listItem.url)" v-for="(listItem,listIndex) in list"
							:key="listIndex">
							<image class="grid-img" :src="listItem.img" />
							<text class="grid-text">{{listItem.title}}</text>
						</u-grid-item>
					</u-grid>
				</view>
				<view class="items_box margin-top">
					<view @click="toPage('/pages_two/mine/message')" class="between_layout cell_area">
						<view class="start_layout">
							<u-icon color="#3389FF" size="20" name="bell-fill"></u-icon>
							<view class="cell-name">我的消息提醒</view>
						</view>
						<u-icon color="#999999" size="16" name="arrow-right"></u-icon>
					</view>
					<view @click="toPage('/pages_two/problem/company/index')" class="between_layout cell_area">
						<view class="start_layout">
							<u-icon color="#FD8A19" size="20" name="info-circle-fill"></u-icon>
							<view class="cell-name">企业反映问题</view>
						</view>
						<u-icon color="#999999" size="16" name="arrow-right"></u-icon>
					</view>
					<view @click="toPage('/pages_two/problem/company/index?type=1')" class="between_layout cell_area">
						<view class="start_layout">
							<u-icon color="#08B966" size="20" name="grid-fill"></u-icon>
							<view class="cell-name">项目进度问题</view>
						</view>
						<u-icon color="#999999" size="16" name="arrow-right"></u-icon>
					</view>
				</view>
				<view style="height: 160rpx;"></view>
			</view>
		</view>
		<view class="fixed_bottom">
			<u-button shape='circle' class="logout" type="error" @click="logout">退出登录</u-button>
		</view>
	</view>
</template>

<script>
	import {
		getCompanyDetail,
		projectData
	} from '@/utils/api.js'
	import unAuth from '../../template/unAuth.vue'
	export default {
		components: {
			unAuth
		},
		data() {
			return {
				roles: [],
				userName: '',
				list: [],
				list1: [{
						img: require('../../static/mine/mine_icon1.png'),
						title: '项目申报',
						url: '/pages_two/project/allProject?entryStatus=0'
					},
					{
						img: require('../../static/mine/mine_icon2.png'),
						title: '在批审批',
						url: '/pages_two/mine/auditList/index?entryStatus=2&title=在批审批'
					},
					{
						img: require('../../static/mine/mine_icon3.png'),
						title: '在建审批',
						url: '/pages_two/mine/auditList/index?entryStatus=3&title=在建审批'
					},
					{
						img: require('../../static/mine/mine_icon4.png'),
						title: '竣工审批',
						url: '/pages_two/mine/auditList/index?entryStatus=4&title=竣工审批'
					},
					{
						img: require('../../static/mine/mine_icon6.png'),
						title: '投产审批',
						url: '/pages_two/mine/auditList/index?entryStatus=5&title=投产审批'
					},
					{
						img: require('../../static/mine/mine_icon5.png'),
						title: '达效审批',
						url: '/pages_two/mine/auditList/index?entryStatus=6&title=达效审批'
					},
				],
				list2: [{
						img: require('../../static/mine/mine_icon1.png'),
						title: '项目审核',
						url: '/pages_two/mine/auditList/projectAudit'
					},
					{
						img: require('../../static/mine/mine_icon2.png'),
						title: '在批审核',
						url: '/pages_two/mine/auditList/index?entryStatus=2&title=在批审核'
					},
					{
						img: require('../../static/mine/mine_icon3.png'),
						title: '在建审核',
						url: '/pages_two/mine/auditList/index?entryStatus=3&title=在建审核'
					},
					{
						img: require('../../static/mine/mine_icon4.png'),
						title: '竣工审核',
						url: '/pages_two/mine/auditList/index?entryStatus=4&title=竣工审核'
					},
					{
						img: require('../../static/mine/mine_icon6.png'),
						title: '投产审核',
						url: '/pages_two/mine/auditList/index?entryStatus=5&title=投产审核'
					},
					{
						img: require('../../static/mine/mine_icon5.png'),
						title: '达效审核',
						url: '/pages_two/mine/auditList/index?entryStatus=6&title=达效审核'
					},
					{
						img: require('../../static/mine/mine_icon7.png'),
						title: '企业审核',
						url: '/pages_two/mine/company/auditList'
					},
				],
				numList: [{
					count: 11,
					title: '全部项目'
				}, {
					count: 33,
					title: '取消项目'
				}, {
					count: 2,
					title: '在建项目'
				}, {
					count: 4,
					title: '竣工项目'
				}, {
					count: 6,
					title: '签约项目'
				}, {
					count: 7,
					title: '在批项目'
				}, {
					count: 21,
					title: '投产项目'
				}, {
					count: 67,
					title: '达效项目'
				}, ]
			}
		},
		onShow() {
			this.roles = uni.getStorageSync("roleinfo")
			if (this.roles.includes('company')) {
				getCompanyDetail().then(res => {
					this.userName = res.data.companyName
				})
				this.list = this.list1
			} else {
				this.list = this.list2
				this.userName = uni.getStorageSync("userinfo").userName
				projectData().then(res => {
					this.numList[0].count = res.data.count1
					this.numList[1].count = res.data.count2
					this.numList[2].count = res.data.count3
					this.numList[3].count = res.data.count3
					this.numList[4].count = res.data.count4
					this.numList[5].count = res.data.count5
					this.numList[6].count = res.data.count6
					this.numList[7].count = res.data.count7
				})
			}
		},
		methods: {
			toPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			//退出登录
			logout() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认退出本次登录吗?',
					confirmText: '立即退出',
					success(res) {
						if (res.confirm) {
							uni.removeStorageSync('userinfo')
							uni.removeStorageSync('access_token')
							uni.showLoading({
								title: '退出中',
							});
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/login/login'
								})
								uni.hideLoading()
							}, 1000)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-img {
		height: 355rpx;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: url(../../static/mine/bg.png);
		background-size: 100% 100%;
	}

	.top_info {
		padding-top: 50rpx;

		.avatar-img {
			height: 150rpx;
			width: 150rpx;
			border-radius: 50%;
			margin-right: 30rpx;
		}

		.col_layout {
			.name {
				font-size: 34rpx;
				font-weight: bold;
				color: #FFFFFF;
			}

			.edit {
				font-size: 22rpx;
				color: #FFFFFF;
				display: flex;
				padding: 10rpx 18rpx;
				border-radius: 30rpx;
				border: 1rpx solid #FFFFFF;
				margin-top: 20rpx;
			}
		}
	}

	.logout {
		font-size: 30rpx;
		color: #FFFFFF;
		// background: #FE0524;
		border-radius: 50rpx;
		padding: 24rpx;
		width: 100%;
	}

	.grid-area {
		padding-top: 30rpx;
		margin-top: 30rpx;

		.grid-img {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 20rpx;
		}

		.grid-text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #333333;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin-bottom: 32rpx;
		}
	}

	.cell_area {
		padding: 30rpx;
		border-bottom: 2rpx solid #F8F8F8;

		.cell-name {
			margin-left: 16rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
		}
	}
</style>